<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="SerachVal"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="handleClickSearch"
    />
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="blue"
    >
      <van-swipe-item
        v-for="item in banner"
        :key="item.id"
      >
        <img
          :src="item.image_url"
          width="100%"
          style="
             {
              display: 'block';
            }
          "
          alt=""
        />
      </van-swipe-item>
    </van-swipe>

    <!-- 图标导航 -->
    <Channel :channel="channel"></Channel>

    <!-- 品牌制造商 -->
    <div class="brand">
      <div class="home_title">品牌制造商直供</div>
      <Brand :brandList="brandList"></Brand>
    </div>

    <!-- 新品首发 -->
    <div class="newGoods">
      <h4>周一周四·新品首发</h4>
      <NewGoods :newGoodsList="newGoodsList"></NewGoods>
    </div>

    <!-- 人气推荐 -->
    <div class="recommend">
      <div class="ban1">人气推荐</div>
      <van-card
        v-for="item in hotGoodsList"
        :key="item.id"
        :price="item.retail_price + '.00' + '元'"
        :desc="item.goods_brief"
        :title="item.name"
        class="goods-card"
        :thumb="item.list_pic_url"
      />
    </div>

    <!-- 专题精选 -->
    <div class="zhuanti">
      <div class="title">专题精选</div>
      <van-swipe
        class="my-swipe"
        indicator-color="transparent"
      >
        <!--  v-html="item.content" -->
        <van-swipe-item
          v-for="item in topicList"
          :key="item.id"
        >
          <img
            :src="item.item_pic_url"
            alt=""
          >
          <h2>{{ item.title }}
            <span>{{ item.read_count }}</span>
          </h2>
          <p>{{ item.subtitle }}</p>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 分类 -->
    <CategoryList
      :categoryList="categoryList"
      :goodsList="goodsList"
    ></CategoryList>

    <!-- 淡出 -->
    <transition name="van-fade">
      <div
        class="popup-shadow"
        v-show="$store.state.isShowPopupShadow"
      ></div>
    </transition>
    <transition name="van-slide-right">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import axios from 'axios'

import { GetHomeList } from "@/request/api.js";
import Brand from "@/components/Brand.vue";
import Channel from "@/components/Channel.vue";
import NewGoods from "@/components/NewGoods.vue";
import CategoryList from "@/components/CategoryList.vue";

export default {
  name: "Home",

  data() {
    return {
      SerachVal: "",
      // 轮播图
      banner: [],
      // 图标导航
      channel: [],
      // 品牌制造商
      brandList: [],
      // 新品首发
      newGoodsList: [],
      // 人气推荐
      hotGoodsList: [],
      // 专题精选
      topicList: [],
      // 分类
      categoryList: {},
      // 商品
      goodsList: {},
    };
  },
  created() {
    GetHomeList()
      .then((res) => {
        // console.log('res请求的数据：', res.data.banner)
        // this.banner = res.data.banner;
        console.log("res:", res.data);
        // this.channel = res.data.channel;
        // 解构赋值
        let {
          banner,
          channel,
          brandList,
          newGoodsList,
          hotGoodsList,
          topicList,
          categoryList,
        } = res.data;
        this.banner = banner;
        this.channel = channel;
        this.brandList = brandList;
        this.newGoodsList = newGoodsList;
        this.hotGoodsList = hotGoodsList;
        this.topicList = topicList;
        this.categoryList = categoryList;
        this.goodsList = categoryList.goodsList;
      })
      .catch((err) => {
        console.log("error!!");
        console.log(err);
      });
  },
  methods: {
    handleClickSearch() {
      this.$router.push("/home/searchPopup");
      // 修改 vuex 中的 isShowPopupShadow 值 为 true
      this.$store.commit("changeIsShowPopupShadow", true);
    },
  },
  components: {
    Brand,
    Channel,
    NewGoods,
    CategoryList,
  },
};
</script>

<style lang="less" scoped>
.popup-shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 98;
}
/* width: 100%;
  height: 20%;
   display: flex;
  flex-wrap: wrap;
  */

.brand {
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
}
.home_title {
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.newGoods {
  background: rgb(255, 255, 255) none repeat scroll 0% 0%;
  padding-bottom: 2rem;
  h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
}
.recommend {
  margin-top: 10px;
  width: 100%;
  background-color: white;
  padding-bottom: 2.8rem;

  .ban1 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  .van-card__title {
    max-height: 32px;
    font-weight: 500;
    line-height: 29px;
    font-size: 18px;
  }
  .van-card__desc {
    height: 40px;
    max-height: 100px;
    line-height: 40px;
  }
  .van-card__price {
    line-height: 20px;
    color: #8d0000;
  }
}
.zhuanti {
  margin-top: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  padding: 0 8px;
  padding-bottom: 2.8rem;
  .van-swipe__indicators {
    background-color: transparent;
  }
  .title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
  }
  img {
    width: 100%;
    height: 200px;
  }
  h2 {
    line-height: 40px;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    span {
      color: darkred;
    }
  }
  p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
  }
}
</style>
